5 表单标签

#HTML

表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。

表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。这些小部件称为控件（controls）。

form 标签

<form> 标签用来定义一个表单，所有表单内容放到这个容器元素之中。

<form>
  <!-- 各种表单控件-->
</form>

示例：

<form action="https://example.com/api" method="post">
  <label for="POST-name">用户名：</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
</form>

上面代码就是一个表单，一共包含三个控件：一个 <label> 标签，一个文本输入框，一个提交按钮。其中，文本输入框的 name 属性是 user，表示将向服务器发送一个键名为 user 的键值对，键值就是这个控件的 value 属性，等于用户输入的值。
用户在文本输入框里面，输入用户名，比如 foobar，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个> POST 请求，发送 user=foobar 这样一段数据。

<form> 有以下属性。

enctype 属性

<form> 表单的 enctype 属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIME 类型。该属性可以取以下值。

application/x-www-form-urlencoded

application/x-www-form-urlencoded 是默认类型，控件名和控件值都要转义（空格转为 + 号，非数字和非字母转为 %HH 的形式，换行转为 CR LF），控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用 & 分隔。

multipart/form-data

multipart/form-data 主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有 Content-Disposition 属性，值为 form-data，以及一个 name 属性，值为控件名。

Content-Disposition: form-data; name="mycontrol"

下面是上传文件的表单：

<form action="https://example.com/api"
      enctype="multipart/form-data"
      method="post">
  用户名：<input type="text" name="submit-name"><br>
  文件：<input type="file" name="files"><br>
  <input type="submit" value="上传"> <input type="reset" value="清除">
</form>

输入用户名 Larry，选中一个 file1.txt 文件，然后点击 " 上传 "。浏览器发送的实际数据如下：

Content-Type: multipart/form-data; boundary=--AaB03x

--AaB03x
Content-Disposition: form-data; name="submit-name"

Larry
--AaB03x
Content-Disposition: form-data; name="files"; filename="file1.txt"
Content-Type: text/plain

… contents of file1.txt …
--AaB03x--

上面代码中，浏览器将这个表单发成多个数据块。最上面使用 Content-Type 字段告诉服务器，数据格式是 multipart/form-data（即多个数据块），每个数据块的分隔标志是 --AaB03x。每个数据块的第一行是 Content-Disposition，其中的 name 字段表示这个数据块的控件名，数据体则是该控件的数据值，比如第一个数据块的 name 属性是 submit-name 控件，数据体是该控件的值 Larry。第二个数据块是控件 files，由于该控件是上传文件，所以还要用 filename 属性给出文件名 file1.txt，数据体是 file1.txt 的内容。

# <fieldset>，<legend>

<fieldset> 标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。

<form>
  <fieldset>
    <p>年龄：<input type="text" name="age"></p>
    <p>性别：<input type="text" name="gender"></p>
  </fieldset>
</form>

上面代码中，两个输入框是一组，它们的外面会显示一个方框。

<fieldset> 有以下属性。

<legend> 标签用来设置 <fieldset> 控件组的标题，通常是 <fieldset> 内部的第一个元素，会嵌入显示在控件组的上边框里面。

<fieldset>
  <legend>学生情况登记</legend>
  <p>年龄：<input type="text" name="age"></p>
  <p>性别：<input type="text" name="gender"></p>
</fieldset>

label 标签

<label> 标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。

<label for="user">用户名：</label>
<input type="text" name="user" id="user">

<label> 的一大优势是增加了控件的可用性。有些控件比较小（比如单选框），不容易点击，那么点击对应的 <label> 标签，也能选中该控件。点击 <label>，就相当于控件本身的 click 事件。

<label> 的 for 属性关联相对应的控件，它的值是对应控件的 id 属性。所以，控件最好设置 id 属性。

控件也可以放在 <label> 之中，这时不需要 for 属性和 id 属性。

<label>用户名：
  <input type="text" name="user">
</label>

<label> 的属性如下。

一个控件可以有多个关联的 <label> 标签。

<label for="username">用户名：</label>
<input type="text" id="username" name="username">
<label for="username"><abbr title="required">*</abbr></label>

input 标签

https://wangdoc.com/html/form#input
<input> 标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。
它有多种类型，取决于 type 属性的值，默认值是 text，表示一个输入框。

<input>
<!-- 等同于 -->
<input type="text">

<input> 的属性非常多，有些属性是某个类型专用的，放在下文的 " 类型 " 部分介绍。这里介绍一些所有类型的共同属性。

type 属性决定了 <input> 的形式。该属性可以取以下值。

text

type="text" 是普通的文本输入框，用来输入单行文本。如果用户输入换行符，换行符会自动从输入中删除。

<input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

text 输入框有以下配套属性。

type="search" 是一个用于搜索的文本输入框，基本等同于 type="text"。某些浏览器会在输入的时候，在输入框的尾部显示一个删除按钮，点击就会删除所有输入，让用户从头开始输入。

<form>
  <input type="search" id="mySearch" name="q"
    placeholder="输入搜索词……" required>
  <input type="submit" value="搜索">
</form>

button

submit

image

reset

checkbox

radio

email

password

file

hidden

number

range

url

tel

color

date

time

month

week

datetime-local

button

<button> 标签会生成一个可以点击的按钮，没有默认行为，通常需要用 type 属性或脚本指定按钮的功能。

<button>点击</button>

上面代码会产生一个按钮，上面的文字就是 " 点击 "。

button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。

<button name="search" type="submit">
  <img src="search.gif">搜索
</button>

<button> 具有以下属性。

select

<select> 标签用于生成一个下拉菜单。

<label for="pet-select">宠物：</label>

<select id="pet-select" name="pet-select">
  <option value="">--请选择一项--</option>
  <option value="dog">狗</option>
  <option value="cat">猫</option>
  <option value="others">其他</option>
</select>

option，optgroup

<option> 标签用在 <select>、<optgroup>、<datalist> 里面，表示一个菜单项，参见 <select> 的示例。

textarea

<textarea> 是一个块级元素，用来生成多行的文本框。

output

<output> 标签是一个行内元素，用于显示用户操作的结果。